<template>
    <view class=" tn-p-sm">
        <tn-navbar>多段收费配置</tn-navbar>
        <view class="tn-mt tn-mb tn-flex justify-between">
            <tn-title
                title="多段收费配置"
                mode="vLine"
                assist-color="tn-orange"
                size="lg" />
				<view>
					<tn-button  text text-color="tn-grey"> 未启用</tn-button>
				</view>
        </view>
        <!-- 收费配置 -->
        <view class="tn-shadow-md tn-p-xs tn-mb-xl">
            <tn-form
                ref="formRef"
                :model="formData"
                label-position="top">
                <tn-form-item label="收费类型">
                    <tn-bubble-box
                        :options="Dict.dict.COUPON_TYPE"
                        position="bottom"
                        @click="confirmBubble(Dict.dict.COUPON_TYPE, 'couponType', $event)">
                        <tn-input
                            style="pointer-events: none"
                            :model-value="Dict.label.COUPON_TYPE[formData.couponType]"
                            placeholder="请选择收费类型" />
                    </tn-bubble-box>
                </tn-form-item>
                <tn-form-item>
                    <template #label>
                        <tn-title
                            title="最大收费类型"
                            mode="dot"
                            sub-title="isPass"
                            assist-color="tn-blue" />
                    </template>
                    <tn-bubble-box
                        :options="Dict.dict.COUPON_TYPE"
                        position="bottom"
                        @click="confirmBubble(Dict.dict.COUPON_TYPE, 'couponType', $event)">
                        <tn-input
                            style="pointer-events: none"
                            :model-value="Dict.label.COUPON_TYPE[formData.couponType]"
                            placeholder="请选择最大收费类型" />
                    </tn-bubble-box>
                </tn-form-item>

                <tn-form-item prop="isPass">
                    <template #label>
                        <tn-title
                            title="当日最大收费"
                            mode="dot"
                            sub-title="isPass"
                            assist-color="tn-blue" />
                    </template>
                    <tn-input
                        v-model="formData.carPlate"
                        placeholder=""
                        :border="customStyleBorder"
                        :custom-style="customStyleInput">
                        <template #suffix> <tn-button text>元</tn-button></template></tn-input
                    >
                    <view class="tn-grey_text">提示：0-不限额</view>
                </tn-form-item>
            </tn-form>
        </view>
        <!-- 第一段时间范围配置 -->

        <view class="tn-shadow-md tn-p-xs tn-mt">
            <view class="tn-mt tn-mb tn-flex justify-between">
                <tn-title
                    title="第一段收费配置"
                    mode="vLine"
                    assist-color="tn-orange"
                    size="lg" /><tn-switch v-model="selectValue" />
            </view>
            <tn-form
                ref="formRef"
                :model="formData"
                label-position="top">
                <tn-form-item>
                    <template #label>
                        <tn-title
                            title="第一段时间范围"
                            mode="dot"
                            sub-title="isPass"
                            assist-color="tn-blue" />
                    </template>
                <view class="tn-flex justify-between">
                    <tn-input
                        @click="openPickerDate('startTime')"
                        type="select"
                        v-model="formData.startTime"
                        placeholder="请选择开始时间" >
                		<template #suffix>
                			<tn-icon name="calendar"></tn-icon>
                			
                		</template>
                		</tn-input>
                    <tn-input
                        @click="openPickerDate('endTime')"
                        type="select"
                        v-model="formData.endTime"
                        placeholder="请选择结束时间" >
                		<template #suffix>
                			<tn-icon name="calendar"></tn-icon>
                			
                		</template></tn-input>
                </view>
                </tn-form-item>
                <tn-form-item label="最大收费类型">
                    <tn-bubble-box
                        :options="Dict.dict.COUPON_TYPE"
                        position="top"
                        @click="confirmBubble(Dict.dict.COUPON_TYPE, 'couponType', $event)">
                        <tn-input
                            style="pointer-events: none"
                            :model-value="Dict.label.COUPON_TYPE[formData.couponType]"
                            placeholder="请选择最大收费类型" />
                    </tn-bubble-box>
                </tn-form-item>

                <tn-form-item prop="isPass">
                    <template #label>
                        <tn-title
                            title="免费时间"
                            mode="dot"
                            sub-title="isPass"
                            assist-color="tn-blue" />
                    </template>
                    <tn-input
                        v-model="formData.carPlate"
                        placeholder=""
                        :border="customStyleBorder"
                        :custom-style="customStyleInput">
                        <template #suffix>
                            <view class="tn-text-xs"> <tn-button text>分钟</tn-button></view></template
                        ></tn-input
                    >
                    <view class="tn-grey_text">提示：0-不限额</view>
                </tn-form-item>
                <tn-form-item prop="isPass">
                    <template #label>
                        <tn-title
                            title="起步时段"
                            mode="dot"
                            sub-title="isPass"
                            assist-color="tn-blue" />
                    </template>
                    <view class="tn-flex justify-item-start">
                        <tn-input
                            v-model="formData.carPlate"
                            placeholder=""
                            :border="customStyleBorder"
                            :custom-style="customStyleInput">
                            <template #prefix> <tn-button text>每</tn-button></template>
                            <template #suffix> <tn-button text>分钟</tn-button></template></tn-input
                        >
                        <tn-input
                            v-model="formData.carPlate"
                            placeholder=""
                            :border="customStyleBorder"
                            :custom-style="customStyleInput">
                            <template #prefix> <tn-button text>至</tn-button></template>
                            <template #suffix> <tn-button text>分钟</tn-button></template></tn-input
                        >
                        <tn-input
                            v-model="formData.carPlate"
                            placeholder=""
                            :border="customStyleBorder"
                            :custom-style="customStyleInput">
                            <template #prefix> <tn-button text>收费</tn-button></template>
                            <template #suffix> <tn-button text>元</tn-button></template></tn-input
                        >
                    </view>
                </tn-form-item>
                <tn-form-item prop="isPass">
                    <template #label>
                        <tn-title
                            title="循环时段"
                            mode="dot"
                            sub-title="isPass"
                            assist-color="tn-blue" />
                    </template>
                    <view class="tn-flex justify-item-start">
                        <tn-input
                            v-model="formData.carPlate"
                            placeholder=""
                            :border="customStyleBorder"
                            :custom-style="customStyleInput">
                            <template #prefix> <tn-button text>每</tn-button></template>
                            <template #suffix> <tn-button text>分钟</tn-button></template></tn-input
                        >
                        <tn-input
                            v-model="formData.carPlate"
                            placeholder=""
                            :border="customStyleBorder"
                            :custom-style="customStyleInput">
                            <template #prefix> <tn-button text>收费</tn-button></template>
                            <template #suffix> <tn-button text>元</tn-button></template></tn-input
                        >
                    </view>
                </tn-form-item>
                <tn-form-item prop="isPass">
                    <template #label>
                        <tn-title
                            title="时段限额"
                            mode="dot"
                            sub-title="isPass"
                            assist-color="tn-blue" />
                    </template>
                    <tn-input
                        v-model="formData.carPlate"
                        placeholder=""
                        :border="customStyleBorder"
                        :custom-style="customStyleInput">
                        <template #suffix> <tn-button text>元</tn-button></template></tn-input
                    >
                    <view class="tn-red_text">提示：0-不限额</view>
                </tn-form-item>
            </tn-form>
        </view>

        <view class="tn-shadow-md tn-p-xs tn-mt">
            <view class="tn-mt tn-mb tn-flex justify-between">
                <tn-title
                    title="第二段收费配置"
                    mode="vLine"
                    assist-color="tn-orange"
                    size="lg" /><tn-switch v-model="selectValue" />
            </view>
            <tn-form
                ref="formRef"
                :model="formData"
                label-position="top">
                <tn-form-item>
                    <template #label>
                        <tn-title
                            title="第一段时间范围"
                            mode="dot"
                            sub-title="isPass"
                            assist-color="tn-blue" />
                    </template>
                    <view class="tn-flex justify-between">
                        <tn-input
                            @click="openPickerDate('startTime')"
                            type="select"
                            v-model="formData.startTime"
                            placeholder="请选择开始时间" >
							<template #suffix>
								<tn-icon name="calendar"></tn-icon>
								
							</template>
							</tn-input>
                        <tn-input
                            @click="openPickerDate('endTime')"
                            type="select"
                            v-model="formData.endTime"
                            placeholder="请选择结束时间" >
							<template #suffix>
								<tn-icon name="calendar"></tn-icon>
								
							</template></tn-input>
                    </view>
                </tn-form-item>

                <tn-form-item label="最大收费类型">
                    <tn-bubble-box :options="Dict.dict.COUPON_TYPE" position="top" @click="confirmBubble(Dict.dict.COUPON_TYPE, 'couponType', $event)">
                        <tn-input style="pointer-events: none" :model-value="Dict.label.COUPON_TYPE[formData.couponType]" placeholder="请选择最大收费类型" />
                    </tn-bubble-box>
                </tn-form-item>

                <tn-form-item prop="isPass">
                    <template #label>
                        <tn-title
                            title="免费时间"
                            mode="dot"
                            sub-title="isPass"
                            assist-color="tn-blue" />
                    </template>
                    <tn-input
                        v-model="formData.carPlate"
                        placeholder=""
                        :border="customStyleBorder"
                        :custom-style="customStyleInput">
                        <template #suffix>
                            <view class="tn-text-xs"> <tn-button text>分钟</tn-button></view></template
                        ></tn-input>
                    <view class="tn-grey_text">提示：0-不限额</view>
                </tn-form-item>
                <tn-form-item prop="isPass">
                    <template #label>
                        <tn-title
                            title="起步时段"
                            mode="dot"
                            sub-title="isPass"
                            assist-color="tn-blue" />
                    </template>
                    <view class="tn-flex justify-item-start">
                        <tn-input
                            v-model="formData.carPlate"
                            placeholder=""
                            :border="customStyleBorder"
                            :custom-style="customStyleInput">
                            <template #prefix> <tn-button text>每</tn-button></template>
                            <template #suffix> <tn-button text>分钟</tn-button></template></tn-input
                        >
                        <tn-input
                            v-model="formData.carPlate"
                            placeholder=""
                            :border="customStyleBorder"
                            :custom-style="customStyleInput">
                            <template #prefix> <tn-button text>至</tn-button></template>
                            <template #suffix> <tn-button text>分钟</tn-button></template></tn-input
                        >
                        <tn-input
                            v-model="formData.carPlate"
                            placeholder=""
                            :border="customStyleBorder"
                            :custom-style="customStyleInput">
                            <template #prefix> <tn-button text>收费</tn-button></template>
                            <template #suffix> <tn-button text>元</tn-button></template></tn-input
                        >
                    </view>
                </tn-form-item>
                <tn-form-item prop="isPass">
                    <template #label>
                        <tn-title
                            title="循环时段"
                            mode="dot"
                            sub-title="isPass"
                            assist-color="tn-blue" />
                    </template>
                    <view class="tn-flex justify-item-start">
                        <tn-input
                            v-model="formData.carPlate"
                            placeholder=""
                            :border="customStyleBorder"
                            :custom-style="customStyleInput">
                            <template #prefix> <tn-button text>每</tn-button></template>
                            <template #suffix> <tn-button text>分钟</tn-button></template></tn-input
                        >
                        <tn-input
                            v-model="formData.carPlate"
                            placeholder=""
                            :border="customStyleBorder"
                            :custom-style="customStyleInput">
                            <template #prefix> <tn-button text>收费</tn-button></template>
                            <template #suffix> <tn-button text>元</tn-button></template></tn-input
                        >
                    </view>
                </tn-form-item>
                <tn-form-item prop="isPass">
                    <template #label>
                        <tn-title
                            title="时段限额"
                            mode="dot"
                            sub-title="isPass"
                            assist-color="tn-blue" />
                    </template>
                    <tn-input
                        v-model="formData.carPlate"
                        placeholder=""
                        :border="customStyleBorder"
                        :custom-style="customStyleInput">
                        <template #suffix> <tn-button text>元</tn-button></template></tn-input
                    >
                    <view class="tn-red_text">提示：0-不限额</view>
                </tn-form-item>
            </tn-form>
		
        </view>

      <view class="tn-flex justify-between tn-mt-xl">
          <tn-button
              :shadow="true"
              shadow-color="tn-grey" 
              size="lg"
              width="40%"
              bg-color="tn-gray">
              取消
          </tn-button>
          <tn-button
              :shadow="true"
              shadow-color="tn-grey" 
              size="lg"
              width="40%"
              bg-color="tn-teal-dark">
              启用
          </tn-button>
      </view>
      
      <view class="tn-tabbar-height"></view>
        <tn-date-time-picker v-model:open="openPickerDateVisible" mode="time" @confirm="confirmPickerDate" @close="closePickerDate" />
    </view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import { onLoad } from "@dcloudio/uni-app";
	import cfsheep from "@/cfsheep";
    /** 页面初始化配置  */
    
    /* 1.字典数据 使用方式：【Dict.dict.字典名称】   为字典数据  【Dict.lable.字典名称[值]】 为获取字典文本 */
    const Dict = cfsheep.$store('dict');
    
     /* 2.表单配置处理-背景样式处理 */
    const customStyleInput = ref({ backgroundColor: "#ededed75" });
    const customStyleBorder = ref(false);
     
    
    /* 4.表单气泡选择框使用     <tn-bubble-box :options="Dict.dict.COUPON_TYPE" position="top" @click="confirmBubble(Dict.dict.COUPON_TYPE, 'couponType', $event)" />*/
    	// 确认选择器的选择
    	const confirmBubble = (dict, labelKey, value) => {
    		console.log("confirmBubble=>", labelKey);
    		console.log("confirmBubble1=>", dict[value].value);
    		formData.value[labelKey] = dict[value].value;
    	};
    
    /* 5.日期选择器使用  <tn-date-time-picker v-model:open="openPickerDateVisible" mode="time" @confirm="confirmPickerDate" @close="closePickerDate" />  */
    	// 日期时间筛选-选择器key
    	const pickerDateKey = ref("");
    	
    	// 日期时间控制选择器的可见性
    	const openPickerDateVisible = ref(false);
    	
    	// 打开日期时间选择器
    	const openPickerDate = (type: any) => {
    		pickerDateKey.value = type;
    		openPickerDateVisible.value = true; // 显示选择器
    	};
    	
    	// 关闭日期时间选择器
    	const closePickerDate = () => {
    		openPickerDateVisible.value = false; // 隐藏选择器
    	};
    	
    	// 确认日期时间选择器的选择
    	const confirmPickerDate = (value: any) => {
    		formData.value[pickerDateKey.value] = value;
    		closePickerDate(); // 关闭选择器
    	};
    
    
    	 
    	/* 列表数据处理  */
    	const inputValue = ref();
    	const filterData = () => {};    
    	const tempList = ref([]);   
    	const paging = ref(null);  
    	const dataList = ref(); 
    	const queryList = (pageNo, pageSize) => {
    	    // 模拟数据
    	
    	    for (let i = 0; i < 10; i++) {
    	        tempList.value.push({
    	            id: i,
    	            name: "通道口" + i,
    	            type: "停车金额减免",
    	            duration: { value: 3, unit: "小时" },
    	            amount: "3小时",
    	            price: 2,
    	        });
    	    }
    	    paging.value.complete(tempList.value);
    	};

	
	const pkId = ref();
    // 启用开关
    const selectValue = ref(true);
    const formData = ref({
        id: undefined,
        name: undefined,
        couponType: "",
        startTime: "",
        endTime: "",
    });
    const formRef = ref(); // 表单 Ref


   
	
	onLoad((options) => {
		pkId.value = options.id
		if(pkId.value){
			// getDetailById
		} 
	});
</script>
<style lang="scss" scoped></style>